/*
 * @Author: Wilbur
 * @Date: 2019-08-12 14:46:53
 * @Last Modified by: Wilbur
 * @Last Modified time: 2019-08-12 15:01:12
 */

<template>
    <div class="container keyword-list-container">
        <!-- 类型筛选和新增热门搜索 -->
        <div class="operation-wrapper">
            <el-radio-group
                v-model="radio"
                @change="getTableData(1)"
                size="small"
            >
                <el-radio-button label="1">商城</el-radio-button>
                <el-radio-button label="2">工作</el-radio-button>
                <el-radio-button label="3">学习</el-radio-button>
            </el-radio-group>
            <el-button
                type="primary"
                @click="fnShowDialog"
                size="small">新增热门搜索关键词</el-button>
        </div>
        <!-- /类型筛选和新增热门搜索 -->

        <!-- 表单列表 -->
        <div class="content-wrapper">
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;">
                    <el-table-column
                        fixed="left"
                        header-align="left"
                        align="center"
                        :width="50"
                        label="序号">
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="keyword"
                        show-overflow-tooltip
                        label="名称"/>

                    <el-table-column
                        prop="keyword_sort"
                        show-overflow-tooltip
                        label="排序"/>
                    <el-table-column
                        prop="create_time"
                        label="创建时间"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="date"
                        label="操作"
                        fixed="right"
                        :width="150">
                        <template slot-scope="scope">
                            <div>
                                <el-button
                                    type="text"
                                    @click="fnShowDialogEdit(scope.row)">编辑</el-button>
                                <el-button
                                    type="text"
                                    style="margin-left:10px;"
                                    @click="fnDelKeyword(scope.row)">
                                    删除
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>


        </div>
        <!-- 表单列表 -->

        <!-- <div class="pagination-wrapper clearfix">
            <el-pagination
                background
                layout="total, prev, pager, next"
                :total="page.total_count"
                :page-size="page.page_size"
                @current-change="getTableData" />
        </div> -->

        <!-- 添加关键词弹窗 -->
        <el-dialog
            width="640px"
            :visible.sync="dialogFormVisible"
            :title="page_title"
            class="hotKeywordSearch"
        >
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                :label-position="'left'"
            >
                <el-form-item
                    prop="type"
                    label="选择模块"
                >
                    <el-radio-group v-model="ruleForm.type">
                        <el-radio label="1">商城</el-radio>
                        <el-radio label="2">工作</el-radio>
                        <el-radio label="3">学习</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item
                    label="热词名称"
                    prop="keyword"
                >
                    <el-input
                        v-model="ruleForm.keyword"
                        autocomplete="off"
                        size="small"
                        :style="{width: '424px'}"
                        maxlength="12"
                        show-word-limit
                    />
                </el-form-item>
                <el-form-item
                    label="热词排序"
                    prop="keyword_sort"
                >
                    <el-input
                        type="number"
                        v-model="ruleForm.keyword_sort"
                        autocomplete="off"
                        size="small"
                        :style="{width: '424px'}"
                        maxlength="12"
                        show-word-limit
                    />
                </el-form-item>
                <el-form-item
                    label="跳转链接"
                >
                    <app-action
                        v-if="initAction"
                        @action="getAction"
                        :action="JSON.stringify(app_action || {})"
                        :show="false"
                        :style="{marginLeft: '27px', marginTop: '4px'}"
                        id="appAction"
                    />
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    @click="fnCancel"
                    type="default"
                    :style="{width: '126px', height: '36px', marginRight: '52px'}"
                >取 消</el-button>
                <el-button
                    type="primary"
                    :style="{width: '126px', height: '36px'}"
                    @click="submitForm('ruleForm')"
                >确 定</el-button>
            </div>
        </el-dialog>
        <!-- /添加关键词弹窗 -->
    </div>
</template>

<script>
import Clipboard from 'clipboard';
import appAction from '@/components/active/app-action.vue';
export default {
    components: { appAction },
    data() {
        return {
            app_action: '',
            initAction: false,
            page_title: '',
            type_Keyword: '',
            radio: '1',
            authResult: {},
            tableData: [],
            filterData: {
                title: ''
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            baseUrl: '',
            mobileUrl: '',
            escape: escape,
            sessionTicket: localStorage.getItem('sessionTicket'),
            formLabelWidth: '80px',
            dialogFormVisible: false,
            keyword_id: '',
            ruleForm: {
                keyword: '',
                keyword_sort: '',
                type: ''
            },
            rules: {
                keyword: [{
                    required: true, message: '请输入名称', trigger: 'blur'
                }],
                keyword_sort: [{
                    required: true, message: '请输入排序', trigger: 'blur'
                }],
                type: [{
                    required: true, message: '请选择热门搜索类型', trigger: 'change'
                }],
            }
        };
    },
    watch: {
    },
    mounted() {
        this.authResult = this.$route.meta.authResult;
        this.initAction = true;
        this.baseUrl = this.$baseUrl;
        this.mobileUrl = location.host == 'phaadmin.wxhand.com' ? 'http://class.zsdx.cn' : 'http://task.wxhand.com';
        this.$store.commit('SET_HEADER', [
            {
                title: "APP后台",
            },
            {
                title: '热门搜索'
            },
            {
                title: '热门搜索'
            }
        ]);
        this.getTableData();
    },
    methods: {
        /**
         *获取表格数据 默认商城
         */
        getTableData (page) {
            this.$post('/student/search_keyword%5Cget_list', {
                // page_id: page || this.page.now_page,
                type: this.radio
            },resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    // this.page.now_page = resp.data.page.now_page;
                    // this.page.total_count = resp.data.page.total_count;
                    // this.page.page_size = resp.data.page.page_size;
                }
            });
        },
        fnCancel() {
            this.dialogFormVisible = false;
            this.resetForm('ruleForm');
        },
        fnShowDialogEdit(row) {
            this.initAction = false;
            this.page_title = '编辑关键字弹窗';
            this.type_Keyword = 'edit';
            this.getAppAction(row.id).then(resp => {
                this.initAction = true;
                this.app_action = resp ? JSON.parse(resp) : {};
                this.$set(this.ruleForm, 'type', row.type.toString());
                this.keyword_id = row.id;
                this.ruleForm.keyword = row.keyword;
                this.ruleForm.keyword_sort = row.keyword_sort;
                this.dialogFormVisible = true;
            });
        },

        //获取app_action
        getAppAction (id) {
            return new Promise((resolve,reject) => {
                this.$post('/student/search_keyword%5Cget', { id: id }, resp => {
                    if (resp.code == 1) {
                        resolve(resp.data.app_action);
                    }
                });
            });
        },

        submitForm(formName) {
            let data = {};

            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.type_Keyword == 'add') {
                        data = {
                            id: '',
                            type: this.ruleForm.type,
                            keyword: this.ruleForm.keyword,
                            keyword_sort: this.ruleForm.keyword_sort,
                            app_action: JSON.stringify(this.app_action)
                        };
                    } else if (this.type_Keyword == 'edit') {
                        data = {
                            id: this.keyword_id,
                            type: this.ruleForm.type,
                            keyword: this.ruleForm.keyword,
                            keyword_sort: this.ruleForm.keyword_sort,
                            app_action: JSON.stringify(this.app_action)
                        };
                    }

                    this.fnSubmitKeyword(data);
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        /**
         * @description 获取app_action
         */
        getAction (action) {
            let appAction = JSON.parse(action);

            this.app_action = appAction;
            console.log('appAction', appAction);
        },

        /**
         * 新增热门搜索
         */
        fnSubmitKeyword(data) {
            this.$post('/student/search_keyword%5Csave', data, resp => {
                if (resp.code == 1) {
                    this.resetForm('ruleForm');
                    this.dialogFormVisible = false;
                    this.getTableData();
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                        center: true
                    });
                }
            });
        },
        resetForm(formName) {
            if(this.$refs[formName]) {
                this.$refs[formName].resetFields();
            }
        },
        fnShowDialog() {
            this.initAction = false;
            this.page_title = '新增关键字弹窗';
            this.type_Keyword = 'add';
            this.resetForm('ruleForm');
            this.ruleForm = {
                keyword: '',
                keyword_sort: '',
                type: this.radio
            };
            this.dialogFormVisible = true;
            this.initAction = false;
            this.app_action = '';
            this.$nextTick(() => {
                this.initAction = true;
            });
        },

        /**
         * 删除
         */
        fnDelKeyword(row) {
            this.$confirm('确认要删除该条热门搜索记录？', '提示', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/search_keyword%5Cdelete', {
                    id: row.id,
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$message({
                            type: 'success',
                            message: '操作成功',
                            center: true
                        });
                    }else{
                        this.$message({
                            type: 'warning',
                            message: resp.msg,
                            center: true
                        });
                    }
                });
            }).catch(() => {
            });
        },

        /**
         * 跳转页面
         */
        handleRoute(name, query) {
            let obj = {
                name
            };

            if (query) {
                obj.query = query;
            }

            this.$router.push(obj);
        },

        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.operation-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 12px 23px;
    background-color: #fff;

    .el-button {
        margin-left: 10px;
    }
}
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
}
.search-wrapper {
    padding: 15px;
    background-color: #fff;
}
.filter-item {
    .el-form-item {
        margin-bottom: 0;
        white-space: nowrap;
    }
    .el-input {
        width: auto;
        vertical-align: middle;
    }
    .el-button {
        margin-left: 15px;
        vertical-align: middle;
    }
}
.table-wrapper {
    flex: 1;
    background-color: #fff;
    .table-image{
        width: 150px;
    }
    .table-link{
        color: #409EFF;
    }
    .el-button {
        padding: 0;
    }
    .icon-bianji{
        font-size: 14px;
        color: #B9B9B9;
        cursor: pointer;
    }
    .btn-delete {
        color: #fd4d32;
        &.is-disabled {
            color: #c0c4cc;
            cursor: not-allowed;
        }
    }
    .submit-config-item {
        display: inline-block;
        position: relative;
        padding-right: 10px;
        font-size: 14px;

        & + .submit-config-item {
            padding-left: 10px;
            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0;
                width: 1px;
                height: 14px;
                transform: translate(0, -50%);
                background-color: #d8d8d8;
            }
        }

        .num {
            vertical-align: middle;
        }
        .iconfont {
            font-size: 16px;
            color: #b9b9b9;
            vertical-align: middle;
        }

        .icon-tupian {
            font-size: 20px;
        }
    }
}
.pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
        float: right;
        padding: 0;
        background-color: transparent;
    }
}
.dialog-link{
    & + .dialog-link{
        margin-top: 20px;
    }
    .link-label{
        font-weight: 500;
        margin-right: 20px;
    }
}
.dialog-footer {
    display: flex;
    justify-content: center;
    margin-top: -50px;
}
</style>
<style lang="less">
.keyword-list-container {
    tbody {
        .cell {
            display: flex;
            align-items: center;
            height: 48px;
        }
    }
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .hotKeywordSearch .el-dialog__body {
        padding-left: 68px;
    }
}
.task-list-preview-popover {
    min-width: auto!important;
    width: 120px!important;
    height: 120px;
    padding: 8px!important;
}
.sort-dialog{
    width: 270px!important;
}
#appAction {
     .action-cascader {
        background: #ffffff;
        width: 424px !important;
    }
    .el-input__inner {
        background: #ffffff;
        width: 424px;
    }
    ._content_select {
        background: #ffffff;
            width: 240px !important;
        .el-input__inner {
            background: #ffffff;
            width: 240px !important;
        }
    }
    ._content_input {
        .el-input__inner {
            background: #ffffff;
            width: 240px !important;
        }
    }
}
</style>
